/**
 * React Native Log Printer - 基础使用示例
 */

import React, { useEffect } from 'react'
import { View, Text, Button, StyleSheet } from 'react-native'
import Print, { usePrintLogger, usePrintStatus } from 'react-native-log-printer'

// 方式1: 直接使用全局Print实例
const DirectUsageExample = () => {
  const handleBasicLogging = () => {
    // 基础日志
    Print.log('这是一条普通日志')
    Print.info('这是信息日志')
    Print.warn('这是警告日志')
    Print.error('这是错误日志')
    Print.debug('这是调试日志')
  }

  const handleAdvancedLogging = () => {
    // 对象和数组
    Print.json({ name: '用户', age: 25, hobbies: ['编程', '阅读'] }, '用户信息')

    // 表格数据
    const tableData = [
      { id: 1, name: 'Alice', age: 25 },
      { id: 2, name: 'Bob', age: 30 },
      { id: 3, name: 'Charlie', age: 35 },
    ]
    Print.table(tableData, '用户列表')

    // 网络请求日志
    Print.network('POST', '/api/users', { name: 'New User' }, { success: true, id: 123 })

    // 用户行为
    Print.userAction('button_click', { buttonId: 'login', screen: 'HomePage' })
  }

  const handleTimingExample = () => {
    // 计时示例
    Print.time('API请求')

    // 模拟异步操作
    setTimeout(() => {
      Print.timeEnd('API请求')
    }, 1500)

    // 性能日志
    Print.performance('页面渲染', 250)
  }

  const handleGroupingExample = () => {
    Print.group('用户登录流程')
    Print.log('开始验证用户输入')
    Print.log('发送登录请求')
    Print.log('处理登录响应')
    Print.groupEnd('用户登录流程')
  }

  return (
    <View style={styles.container}>
      <Text style={styles.title}>直接使用Print实例</Text>

      <Button title="基础日志" onPress={handleBasicLogging} />
      <Button title="高级日志" onPress={handleAdvancedLogging} />
      <Button title="计时示例" onPress={handleTimingExample} />
      <Button title="分组示例" onPress={handleGroupingExample} />
      <Button title="清空日志" onPress={() => Print.clear()} />
    </View>
  )
}

// 方式2: 使用Hook（需要在PrintProvider内部）
const HookUsageExample = () => {
  const print = usePrintLogger()
  const { status } = usePrintStatus()

  useEffect(() => {
    print.info('组件已挂载', { component: 'HookUsageExample' })

    return () => {
      print.info('组件即将卸载', { component: 'HookUsageExample' })
    }
  }, [print])

  const handleComplexOperation = async () => {
    print.group('复杂操作')

    try {
      print.time('数据处理')

      // 模拟数据处理
      print.log('步骤1: 获取数据')
      await new Promise((resolve) => setTimeout(resolve, 500))

      print.log('步骤2: 处理数据')
      await new Promise((resolve) => setTimeout(resolve, 300))

      print.log('步骤3: 保存结果')
      await new Promise((resolve) => setTimeout(resolve, 200))

      print.timeEnd('数据处理')
      print.info('操作成功完成')
    } catch (error) {
      print.error('操作失败', error)
    } finally {
      print.groupEnd('复杂操作')
    }
  }

  const handleAssertExample = () => {
    const userAge = 25
    print.assert(userAge >= 18, '用户必须年满18岁', { userAge })
    print.assert(userAge < 0, '年龄不能为负数', { userAge })
  }

  return (
    <View style={styles.container}>
      <Text style={styles.title}>使用Hook方式</Text>

      <Text style={styles.status}>连接状态: {status.isConnected ? '已连接' : '未连接'}</Text>
      <Text style={styles.status}>网络状态: {status.isOnline ? '在线' : '离线'}</Text>
      <Text style={styles.status}>队列长度: {status.queueLength}</Text>
      <Text style={styles.status}>本地日志: {status.localLogsCount}</Text>

      <Button title="复杂操作" onPress={handleComplexOperation} />
      <Button title="断言示例" onPress={handleAssertExample} />
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
    justifyContent: 'center',
  },
  title: {
    fontSize: 18,
    fontWeight: 'bold',
    marginBottom: 20,
    textAlign: 'center',
  },
  status: {
    fontSize: 14,
    marginVertical: 2,
    color: '#666',
  },
})

export { DirectUsageExample, HookUsageExample }
